<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <meta name="twitter:site" content="@metroui">
    <meta name="twitter:creator" content="@pimenov_sergey">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="Metro 4 Components Library">
    <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png">

    <meta property="og:url" content="https://metroui.org.ua/v4/index.html">
    <meta property="og:title" content="Metro 4 Components Library">
    <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta property="og:type" content="website">
    <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="968">
    <meta property="og:image:height" content="504">

    <meta name="author" content="Sergey Pimenov">
    <meta name="description" content="Metro 4 provides special classes to create window elements and manipulate them.">
    <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework">

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon.ico" type="image/x-icon">

    <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">
    <link href="highlight/styles/github.css" rel="stylesheet">
    <link href="docsearch/docsearch.min.css" rel="stylesheet">
    <link href="css/site.css" rel="stylesheet">

    <title>Windows - Metro 4 :: Popular HTML, CSS and JS library</title>
</head>
<body class="m4-cloak">

<header data-role="html-container" data-insert-mode="replace" data-html-source="header.html"></header>

<div data-role="html-container" data-insert-mode="replace" data-html-source="sidebar-menu.html"></div>

<div class="container-fluid docs-content">

    <div class="row flex-xl-nowrap">

            <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper">
                <h5>Table of contents</h5>
                <hr/>
                <ul class="toc-nav">
                    <li class="toc-entry"><a href="#">Windows</a></li>
                    <li class="toc-entry"><a href="#_window_about">About</a></li>
                    <li class="toc-entry"><a href="#_window_create">Create window</a></li>
                    <li class="toc-entry">
                        <a href="#_window_caption">Window caption</a>
                        <ul>
                            <li class="toc-entry"><a href="#_window_caption_icon">Icon</a></li>
                            <li class="toc-entry"><a href="#_window_caption_title">Title</a></li>
                            <li class="toc-entry"><a href="#_window_caption_buttons">Buttons</a></li>
                            <li class="toc-entry"><a href="#_window_buttons_events">Buttons events</a></li>
                            <li class="toc-entry"><a href="#_window_custom_buttons">Custom buttons</a></li>
                        </ul>
                    </li>
                    <li class="toc-entry"><a href="#_window_shadow">Shadow</a></li>
                    <li class="toc-entry"><a href="#_window_custom">Customize</a></li>
                    <li class="toc-entry"><a href="#_window_draggable">Draggable</a></li>
                    <li class="toc-entry"><a href="#_window_resizeable">Resizeable</a></li>
                    <li class="toc-entry"><a href="#_window_options">Options</a></li>
                    <li class="toc-entry"><a href="#_window_events">Events</a></li>
                    <li class="toc-entry"><a href="#_window_methods">Methods</a></li>
                    <li class="toc-entry"><a href="#_window_object">Metro.window object</a></li>
                </ul>

            </div>

            <main class="cell-xl-10 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md">
                <div class="place-right d-none d-block-lg" style="width: 200px;">
                    <img src="images/logo.png" class="w-100" alt="">
                </div>

                <h1>Windows</h1>
                <p class="text-leader">
                    Metro 4 provides special classes to create window elements and manipulate them.
                </p>

                <!-- ads-html -->

                <h3 id="_window_about">About</h3>
                <p>
                    Metro 4 build windows with using next classes:
                        <code>.window</code>, <code>.window-caption</code>, <code>.window-content</code> and result window has next structure:
                </p>
                <div class="example">
                    <div class="row">
                        <div class="cell clear">
                            <div class="window w-100" style="height: 300px;">
                                <div class="window-caption">
                                    <span class="icon mif-windows"></span>
                                    <span class="title">Metro 4</span>
                                    <div class="buttons">
                                        <span class="btn-min"></span>
                                        <span class="btn-max"></span>
                                        <span class="btn-close"></span>
                                    </div>
                                </div>
                                <div class="window-content p-2">Window content</div>
                            </div>
                        </div>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div class="window"&gt;
                        &lt;div class="window-caption"&gt;
                            &lt;span class="icon mif-windows"&gt;&lt;/span&gt;
                            &lt;span class="title"&gt;Metro 4&lt;/span&gt;
                            &lt;div class="buttons"&gt;
                                &lt;span class="btn-min"&gt;&lt;/span&gt;
                                &lt;span class="btn-max"&gt;&lt;/span&gt;
                                &lt;span class="btn-close"&gt;&lt;/span&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="window-content p-2"&gt;
                            Window content
                        &lt;/div&gt;
                    &lt;/div&gt;
                </code></pre>

                <h3 id="_window_create">Create window</h3>
                <p>
                    To create window add attribute <code>data-role="window"</code> to your block element.
                </p>
                <div class="example">
                    <div data-role="window" class="p-2">
                        This is a simple window
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div data-role="window" class="p-2"&gt;
                        This is a simple window
                    &lt;/div&gt;
                </code></pre>

                <h3 id="_window_caption">Caption</h3>
                <p>
                    The caption may include the following elements: <code>icon</code>, <code>title</code>, <code>system buttons</code>.
                </p>
                <h4 id="_window_caption_icon">Icon</h4>
                <p>
                    To add <code>icon</code> to window you must add attribute <code>data-icon="..."</code> to element.
                </p>
                <div class="example">
                    <div class="row">
                        <div class="cell-md-6">
                            <div data-role="window" data-icon="<span class='mif-rocket'></span>" class="p-2">
                                Use Font icon to create window icon.
                            </div>
                        </div>
                        <div class="cell-md-6">
                            <div data-role="window" data-icon="<img src='images/location.png'>" class="p-2">
                                Use image to create window icon.
                            </div>
                        </div>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div data-role="window"
                            data-icon="&lt;span class='mif-rocket'&gt;&lt;/span&gt;"
                            class="p-2"&gt;
                        Use Font icon to create window icon.
                    &lt;/div&gt;

                    &lt;div data-role="window"
                            data-icon="&lt;img src='images/location.png'&gt;"
                            class="p-2"&gt;
                        Use image to create window icon.
                    &lt;/div&gt;
                </code></pre>

                <h4 id="_window_caption_title">Title</h4>
                <p>
                    To add <code>title</code> to window you must add attribute <code>data-title="..."</code> to element.
                </p>
                <div class="example">
                    <div data-role="window" data-title="Window title" class="p-2">
                        Set the title with data-title attribute.
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div data-role="window" data-title="Window title" class="p-2"&gt;
                        Set the title with data-title attribute.
                    &lt;/div&gt;
                </code></pre>

                <h4 id="_window_caption_buttons">Buttons</h4>
                <p>
                    You can add system buttons to your window such as: <code>close</code>, <code>min</code> and <code>max</code>.
                    To create buttons you must add relevant attributes:
                        <code>data-btn-close="true"</code>,
                        <code>data-btn-min="true"</code>,
                        <code>data-btn-max="true"</code>.
                </p>
                <div class="example">
                    <div data-role="window" id="-window-buttons"
                         data-title="Window title"
                         data-btn-close="true"
                         data-btn-min="true"
                         data-btn-max="true"
                         class="p-2">
                        On/off window system buttons with attributes.
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div data-role="window" id="-window-buttons"
                         data-title="Window title"
                         data-btn-close="true"
                         data-btn-min="true"
                         data-btn-max="true"
                         class="p-2"&gt;
                        On/off window system buttons with attributes.
                    &lt;/div&gt;
                </code></pre>
                <div class="example d-flex">
                    <input checked type="checkbox" data-role="checkbox" data-caption="btn-close" onclick="$('#-window-buttons').attr('data-btn-close', $(this).is(':checked'))">
                    <input checked type="checkbox" data-role="checkbox" data-caption="btn-min" onclick="$('#-window-buttons').attr('data-btn-min', $(this).is(':checked'))">
                    <input checked type="checkbox" data-role="checkbox" data-caption="btn-max" onclick="$('#-window-buttons').attr('data-btn-max', $(this).is(':checked'))">
                </div>
                <pre><code class="html">
                    &lt;input checked type="checkbox"
                        data-role="checkbox"
                        data-caption="btn-close"
                        onclick="$('#-window-buttons').attr('data-btn-close', $(this).is(':checked'))"&gt;

                    &lt;input checked type="checkbox"
                        data-role="checkbox"
                        data-caption="btn-min"
                        onclick="$('#-window-buttons').attr('data-btn-min', $(this).is(':checked'))"&gt;

                    &lt;input checked type="checkbox"
                        data-role="checkbox"
                        data-caption="btn-max"
                        onclick="$('#-window-buttons').attr('data-btn-max', $(this).is(':checked'))"&gt;
                </code></pre>


                <h4 id="_window_buttons_events">Buttons events</h4>
                <p>
                    When Metro 4 created window buttons, also created default event for this buttons. You can extend buttons events with custom events over special attributes:
                        <code>data-on-close-click="..."</code>,
                        <code>data-on-min-click="..."</code>,
                        <code>data-on-max-click="..."</code>,
                        <code>data-on-caption-dbl-click="..."</code>.
                </p>
                <p>
                    The default events are shown in the example below:
                </p>
                <div class="example pos-relative p-0" style="height: 300px;">
                    <div class="p-2"
                            data-role="window"
                            data-draggable="true"
                            data-title="Window"
                            data-btn-close="true"
                            data-btn-min="true"
                            data-btn-max="true"
                            data-width="300" data-height="160">
                        Click to buttons to view default buttons events.
                    </div>
                </div>

                <h4 id="_window_custom_buttons">Custom buttons</h4>
                <p>
                    You can add a custom buttons to window caption. To add custom buttons, use attribute <code>data-custom-buttons</code>
                </p>
                <div class="example pos-relative p-0" style="height: 300px;">
                    <script>
                        var customButtons = [
                            {
                                html: "<span class='mif-rocket'></span>",
                                cls: " sys-button",
                                onclick: "alert('You press rocket button')"
                            },
                            {
                                html: "<span class='mif-user'></span>",
                                cls: "alert",
                                onclick: "alert('You press user button')"
                            },
                            {
                                html: "<span class='mif-cog'></span>",
                                cls: "warning",
                                onclick: "alert('You press cog button')"
                            }
                        ];
                    </script>
                    <div class="p-2"
                         data-role="window"
                         data-draggable="true"
                         data-title="Window"
                         data-btn-close="true"
                         data-btn-min="true"
                         data-btn-max="true"
                         data-custom-buttons="customButtons"
                         data-width="340" data-height="160">
                        Click to buttons to view default buttons events.
                    </div>
                </div>
                <pre><code>
                    &lt;script&gt;
                        var customButtons = [
                            {
                                html: "&lt;span class='mif-rocket'&gt;&lt;/span&gt;",
                                cls: "sys-button",
                                onclick: "alert('You press rocket button')"
                            },
                            {
                                html: "&lt;span class='mif-user'&gt;&lt;/span&gt;",
                                cls: "alert",
                                onclick: "alert('You press user button')"
                            },
                            {
                                html: "&lt;span class='mif-cog'&gt;&lt;/span&gt;",
                                cls: "warning",
                                onclick: "alert('You press cog button')"
                            }
                        ];
                    &lt;/script&gt;
                    &lt;div class="p-2"
                         data-role="window"
                         data-draggable="true"
                         data-title="Window"
                         data-btn-close="true"
                         data-btn-min="true"
                         data-btn-max="true"
                         data-custom-buttons="customButtons"
                         data-width="300" data-height="160"&gt;
                        Click to buttons to view default buttons events.
                    &lt;/div&gt;
                </code></pre>

                <h3 id="_window_shadow">Add shadow to window</h3>
                <p>
                    You can add <code>shadow</code> to window with attribute <code>data-shadow="true"</code>.
                </p>
                <div class="example">
                    <div data-role="window" id="-window-shadow"
                         data-title="Window title"
                         data-shadow="true"
                         class="p-2">
                        Add shadow to window with attribute data-shadow
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div data-role="window"
                         data-title="Window title"
                         data-shadow="true"
                         class="p-2"&gt;
                        Add shadow to window with attribute data-shadow
                    &lt;/div&gt;
                </code></pre>
                <div class="example d-flex">
                    <input checked type="checkbox" data-role="checkbox" data-caption="Enable shadow" onclick="$('#-window-shadow').attr('data-shadow', $(this).is(':checked'))">
                </div>

                <h3 id="_window_custom">Customize</h3>
                <p>
                    You can change <code>default colors</code> for <code>caption</code> and <code>content</code>. To set it use attributes <code>data-cls-caption="..."</code> and <code>data-cls-content="..."</code>.
                </p>
                <div class="example">
                    <div class="p-2" data-role="window" data-icon="<span class='mif-rocket'></spam>" data-title="The rocket" data-cls-caption="bg-red" data-cls-content="bg-dark fg-yellow">
                        You can customize window with own classes.
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div class="p-2"
                         data-role="window"
                         data-icon="&lt;span class='mif-rocket'&gt;&lt;/spam&gt;"
                         data-title="The rocket"
                         data-cls-caption="bg-red"
                         data-cls-content="bg-dark fg-yellow"&gt;
                        This is a simple DIV transformed to window with data-role.
                    &lt;/div&gt;
                </code></pre>

                <!-- ads-html -->

                <h3 id="_window_draggable">Draggable window</h3>
                <p>
                    To add <code>draggable</code> feature to window add attribute <code>data-draggable="true"</code> to your element. About <code>draggable</code> you can read <a href="draggable.html">in this article</a>.
                </p>
                <div class="example pos-relative p-0" style="height: 300px;">
                    <div class="p-2" data-role="window" data-draggable="true" data-resizable="false" data-width="200" data-height="160" id="-window-draggable">
                        Drag this window on the caption.
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div class="p-2" data-role="window"
                            data-draggable="true"
                            data-width="200"
                            data-height="160"&gt;
                        Drag this window on the caption.
                    &lt;/div&gt;
                </code></pre>
                <div class="example d-flex">
                    <input checked type="checkbox" data-role="checkbox" data-caption="Enable draggable" onclick="$('#-window-draggable').attr('data-draggable', $(this).is(':checked'))">
                </div>

                <h3 id="_window_resizeable">Resizeable window</h3>
                <p>
                    To make window as <code>resizable</code> add attribute <code>data-resizable="true"</code> to your window.
                </p>
                <div class="example pos-relative p-0" style="height: 300px;">
                    <div class="p-2" data-role="window" data-resizable="true" data-draggable="true" data-width="300" data-height="160" id="-window-resizable">
                        Resize the window on hold and move bottom right corner of the window.
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div class="p-2"
                        data-role="window"
                        data-resizable="true"
                        data-draggable="true"
                        data-width="300"
                        data-height="160"&gt;
                        Resize the window on hold and move bottom right corner of the window.
                    &lt;/div&gt;
                </code></pre>
                <div class="example d-flex">
                    <input checked type="checkbox" data-role="checkbox" data-caption="Enable resizable" onclick="$('#-window-resizable').attr('data-resizable', $(this).is(':checked'))">
                </div>

                <h3 id="_window_options">Available options</h3>
                <p>
                    All options you can set over <code>data-*</code> attribute:
                </p>
                <table class="table cell-border table-border options-table">
                    <thead>
                    <tr>
                        <th>Option</th>
                        <th>Data attribute</th>
                        <th>Default</th>
                        <th>Desc</th>
                        <th>Observe</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>width</td>
                        <td><code>data-width</code></td>
                        <td>auto</td>
                        <td>Set initial width to window</td>
                        <td><span class="mif-checkmark fg-green"></span></td>
                    </tr>
                    <tr>
                        <td>height</td>
                        <td><code>data-height</code></td>
                        <td>auto</td>
                        <td>Set initial height to window</td>
                        <td><span class="mif-checkmark fg-green"></span></td>
                    </tr>
                    <tr>
                        <td>btnClose</td>
                        <td><code>data-btn-close</code></td>
                        <td>true</td>
                        <td>Add close button</td>
                        <td><span class="mif-checkmark fg-green"></span></td>
                    </tr>
                    <tr>
                        <td>btnMin</td>
                        <td><code>data-btn-min</code></td>
                        <td>true</td>
                        <td>Add min button</td>
                        <td><span class="mif-checkmark fg-green"></span></td>
                    </tr>
                    <tr>
                        <td>btnMax</td>
                        <td><code>data-btn-max</code></td>
                        <td>true</td>
                        <td>Add max button</td>
                        <td><span class="mif-checkmark fg-green"></span></td>
                    </tr>
                    <tr>
                        <td>clsWindow</td>
                        <td><code>data-cls-window</code></td>
                        <td></td>
                        <td>Additional classes for window</td>
                        <td><span class="mif-checkmark fg-green"></span></td>
                    </tr>
                    <tr>
                        <td>clsCaption</td>
                        <td><code>data-cls-caption</code></td>
                        <td></td>
                        <td>Additional classes for caption</td>
                        <td><span class="mif-checkmark fg-green"></span></td>
                    </tr>
                    <tr>
                        <td>clsContent</td>
                        <td><code>data-cls-content</code></td>
                        <td></td>
                        <td>Additional classes for content</td>
                        <td><span class="mif-checkmark fg-green"></span></td>
                    </tr>
                    <tr>
                        <td>draggable</td>
                        <td><code>data-draggable</code></td>
                        <td>true</td>
                        <td>Add draggable to window</td>
                        <td><span class="mif-checkmark fg-green"></span></td>
                    </tr>
                    <tr>
                        <td>dragElement</td>
                        <td><code>data-drag-element</code></td>
                        <td>.window-caption</td>
                        <td>Set the drag element</td>
                        <td><span class="mif-cancel fg-red"></span></td>
                    </tr>
                    <tr>
                        <td>dragArea</td>
                        <td><code>data-drag-area</code></td>
                        <td>parent</td>
                        <td>Set the area where element can be draggable</td>
                        <td><span class="mif-cancel fg-red"></span></td>
                    </tr>
                    <tr>
                        <td>shadow</td>
                        <td><code>data-shadow</code></td>
                        <td>false</td>
                        <td>Add shadow to window</td>
                        <td><span class="mif-checkmark fg-green"></span></td>
                    </tr>
                    <tr>
                        <td>icon</td>
                        <td><code>data-icon</code></td>
                        <td></td>
                        <td>Window icon</td>
                        <td><span class="mif-checkmark fg-green"></span></td>
                    </tr>
                    <tr>
                        <td>title</td>
                        <td><code>data-title</code></td>
                        <td>Window</td>
                        <td>Window title</td>
                        <td><span class="mif-checkmark fg-green"></span></td>
                    </tr>
                    <tr>
                        <td>content</td>
                        <td><code>data-content</code></td>
                        <td></td>
                        <td>Window content</td>
                        <td><span class="mif-checkmark fg-green"></span></td>
                    </tr>
                    <tr>
                        <td>resizable</td>
                        <td><code>data-resizable</code></td>
                        <td>true</td>
                        <td>Add resizable to window</td>
                        <td><span class="mif-checkmark fg-green"></span></td>
                    </tr>
                    <tr>
                        <td>top</td>
                        <td><code>data-top</code></td>
                        <td>auto</td>
                        <td>Set window top position</td>
                        <td><span class="mif-checkmark fg-green"></span></td>
                    </tr>
                    <tr>
                        <td>left</td>
                        <td><code>data-left</code></td>
                        <td>auto</td>
                        <td>Set window left position</td>
                        <td><span class="mif-checkmark fg-green"></span></td>
                    </tr>
                    <tr>
                        <td>place</td>
                        <td><code>data-place</code></td>
                        <td>auto</td>
                        <td>Set window place (can be: center, top-left, top-center, top-right, right-center, bottom-right, bottom-center, bottom-left, left-center)</td>
                        <td><span class="mif-checkmark fg-green"></span></td>
                    </tr>
                    <tr>
                        <td>closeAction</td>
                        <td><code>data-close-action</code></td>
                        <td>Metro.actions.REMOVE</td>
                        <td>Action when window close. Metro.actions.REMOVE or Metro.actions.HIDE</td>
                        <td><span class="mif-cancel fg-red"></span></td>
                    </tr>
                    </tbody>
                </table>

                <h3 id="_window_events">Events</h3>
                <table class="table cell-border table-border options-table">
                    <thead>
                    <tr>
                        <th>Event</th>
                        <th>Data-*</th>
                        <th>Desc</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td><code>onDragStart</code></td>
                        <td><code>data-on-drag-start</code></td>
                        <td>Generated when the user starts dragging the window</td>
                    </tr>
                    <tr>
                        <td><code>onDragStop</code></td>
                        <td><code>data-on-drag-stop</code></td>
                        <td>Generated when the user stops dragging the window</td>
                    </tr>
                    <tr>
                        <td><code>onDragMove</code></td>
                        <td><code>data-on-drag-move</code></td>
                        <td>Generated when the user dragging the window</td>
                    </tr>
                    <tr>
                        <td><code>onCaptionDblClick</code></td>
                        <td><code>data-on-caption-dbl-click</code></td>
                        <td>Generated when the user double clicks on the window caption</td>
                    </tr>
                    <tr>
                        <td><code>onCloseClick</code></td>
                        <td><code>data-on-close-click</code></td>
                        <td>Generated when the user click close button</td>
                    </tr>
                    <tr>
                        <td><code>onMaxClick</code></td>
                        <td><code>data-on-max-click</code></td>
                        <td>Generated when the user click max button</td>
                    </tr>
                    <tr>
                        <td><code>onMinClick</code></td>
                        <td><code>data-on-min-click</code></td>
                        <td>Generated when the user click min button</td>
                    </tr>
                    <tr>
                        <td><code>onResizeStart</code></td>
                        <td><code>data-on-resize-start</code></td>
                        <td>Generated when the user starts resizing the window</td>
                    </tr>
                    <tr>
                        <td><code>onResizeStop</code></td>
                        <td><code>data-on-resize-stop</code></td>
                        <td>Generated when the user stops resizing the window</td>
                    </tr>
                    <tr>
                        <td><code>onResize</code></td>
                        <td><code>data-on-resize</code></td>
                        <td>Generated when the user resize the window</td>
                    </tr>
                    <tr>
                        <td><code>onWindowCreate</code></td>
                        <td><code>data-on-window-create</code></td>
                        <td>Generated when window was created</td>
                    </tr>
                    <tr>
                        <td><code>onDestroy</code></td>
                        <td><code>data-on-window-destroy</code></td>
                        <td>Generated when the window destroyed</td>
                    </tr>
                    </tbody>
                </table>
                <p>
                    How to use event you can see in <a href="examples/desktop/desktop.html">this example</a>.
                    The example source you can find on <a href="https://github.com/olton/Metro-UI-CSS/tree/master/docs/examples/desktop">github</a>.
                </p>

                <h3 id="_window_methods">Methods</h3>
                <p>
                    The window has a several methods to interact with it.
                </p>
                <table class="table cell-border table-border options-table mt-2">
                    <thead>
                    <tr>
                        <td>Method</td>
                        <td>Desc</td>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td><code>minimized()</code></td>
                        <td>Toggle minimized state</td>
                    </tr>
                    <tr>
                        <td><code>maximized()</code></td>
                        <td>Toggle maximized state</td>
                    </tr>
                    <tr>
                        <td><code>close()</code></td>
                        <td>Close window</td>
                    </tr>
                    <tr>
                        <td><code>hide()</code></td>
                        <td>Add class <code>.no-visible</code> to window</td>
                    </tr>
                    <tr>
                        <td><code>show()</code></td>
                        <td>Remove class <code>.no-visible</code> from window</td>
                    </tr>
                    </tbody>
                </table>


                <h3 id="_window_object">Metro.window object</h3>
                <p class="text-small">Added in 4.2.1</p>
                <p>
                    You can use object <code>Metro.window</code> to manipulate of windows components. This object contains next methods:
                </p>
                <ul>
                    <li><code>isWindow(el)</code> - checks, if element has role <code>window</code></li>
                    <li><code>show(el)</code> - show hidden window</li>
                    <li><code>hide(el)</code> - hide window</li>
                    <li><code>toggle(el)</code> - toggle show/hide window</li>
                    <li><code>isOpen(el)</code> - checks, if a window is showed</li>
                    <li><code>close(el)</code> - close window</li>
                    <li><code>create({...})</code> - create window</li>
                    <li><code>min(el, bool)</code> - minimized or unminimized window</li>
                    <li><code>max(el, bool)</code> - maximized or unmaximized window</li>
                </ul>
            </main>
        </div>

    </div>

    <script src="docsearch/docsearch.min.js"></script>


    <script src="metro/js/metro.js?ver=@@b-version"></script>
    <script src="highlight/highlight.pack.js"></script>
    <script src="js/clipboard.min.js"></script>
    <script src="js/site.js"></script>
    <!-- ads-script -->
    <!-- ga-script -->
    <!-- hit-ua -->
</body>
</html>